<template>
	<view class="booking-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">{{ homestayName }}</view>
		</view>

		<!-- 房型信息 -->
		<view class="room-info">
			<text class="room-name">{{ roomType }}</text>
			<text class="room-date">{{ checkInDate }} - {{ checkOutDate }}</text>
			<text class="room-nights">1晚</text>
		</view>

		<!-- 订房信息 -->
		<view class="booking-section">
			<view class="section-title">订房信息</view>
			<view class="room-count">
				<text>房间数量</text>
				<view class="counter">
					<text class="minus" @click="decreaseRooms">-</text>
					<text class="count">{{ roomCount }}</text>
					<text class="plus" @click="increaseRooms">+</text>
				</view>
			</view>
		</view>

		<!-- 住客信息 -->
		<view class="guest-section">
			<view class="section-title">住客信息</view>
			<input class="guest-input" type="text" v-model="guestName" placeholder="请输入住客姓名" />
			<input class="guest-input" type="number" v-model="guestPhone" placeholder="请输入手机号码" />
		</view>

		<!-- 发票信息 -->
		<view class="invoice-section">
			<view class="section-title">发票信息</view>
			<view class="invoice-option">
				<text>酒店开票·可预约</text>
				<text class="invoice-desc">如有需要请到酒店前台索要发票</text>
			</view>
		</view>

		<!-- 出行保障 -->
		<view class="insurance-section">
			<view class="section-title">出行保障</view>
			<view class="insurance-option">
				<view class="insurance-left">
					<text>平安无忧退改险</text>
					<text class="insurance-desc">可退取订单90%的房费损失</text>
				</view>
				<view class="insurance-right">
					<text class="insurance-price">¥10</text>
					<view class="custom-switch" :class="{ active: hasInsurance }" @click="toggleInsurance"></view>
				</view>
			</view>
		</view>

		<!-- 备注信息 -->
		<view class="remark-section">
			<view class="section-title">备注信息</view>
			<input class="remark-input" type="text" v-model="remark" placeholder="可输入入住人的一些特殊需求" />
		</view>

		<!-- 底部支付栏 -->
		<view class="bottom-bar">
			<view class="price-info">
				<text>合计</text>
				<text class="total-price">¥{{ totalPrice }}</text>
			</view>
			<button class="pay-btn" @click="handlePay">在线支付</button>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from "@/api/system/order.js";
	// import dayjs from "dayjs";
	
	export default {
		data() {
			return {
				homestayName: "",
				roomType: "",
				checkInDate: "",
				checkOutDate: "",
				roomCount: 1,
				guestName: "",
				guestPhone: "",
				hasInsurance: false,
				remark: "",
				basePrice: 0,
			};
		},
		computed: {
			totalPrice() {
				let total = this.basePrice * this.roomCount;
				if (this.hasInsurance) {
					total += 10;
				}
				return total;
			},
		},
		onLoad(options) {
			// 获取传递过来的参数
			this.homestayName = options.homestayName || "1";
			this.roomType = options.roomType || "2";
			this.checkInDate = options.checkInDate || "3";
			this.checkOutDate = options.checkOutDate || "4";
			this.basePrice = Number(options.price) || 0;
			this.roomId = options.roomId || 0;
			this.homeId = options.homeId || 0;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			increaseRooms() {
				if (this.roomCount < 9) {
					this.roomCount++;
				}
			},
			decreaseRooms() {
				if (this.roomCount > 1) {
					this.roomCount--;
				}
			},
			handlePay() {
				//数据校验
				if (!this.guestName) {
					uni.showToast({
						title: "请输入住客姓名",
						icon: "none"
					});
					return;
				}
				if (!this.guestPhone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					});
					return;
				}
				// 手机号正则验证
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.guestPhone)) {
					uni.showToast({
						title: "手机号码格式不正确",
						icon: "none"
					});
					return;
				}
				// 2. 组装订单数据
				const userId = uni.getStorageSync("userId");
				const orderData = {
					orderNumber: `ORD${Date.now()}${Math.floor(Math.random() * 1000)}`,
					homeId: this.homeId,
					roomId: this.roomId,
					checkInDate: this.checkInDate,
					checkOutDate: this.checkOutDate,
					roomCount: this.roomCount,
					guestName: this.guestName,
					guestPhone: this.guestPhone,
					totalAmount: this.totalPrice,
					unitPrice: this.basePrice,
					status: 0, // 待付款
					userId,
				};
				// 3. 缓存所有未支付订单数据
				let unpaidOrders = uni.getStorageSync("unpaidOrders") || [];
				unpaidOrders.push(orderData);
				uni.setStorageSync("unpaidOrders", unpaidOrders);
				// 4. 插入数据库
				uni.showLoading({
					title: "处理中"
				});
				pay(orderData)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 200 && res.data && res.data.orderId) {
							// 拿到 orderId
							orderData.orderId = res.data.orderId;
							// 更新本地缓存
							unpaidOrders = unpaidOrders.map((order) =>
								order.orderNumber === orderData.orderNumber ? orderData : order
							);
							uni.setStorageSync("unpaidOrders", unpaidOrders);
							// 5. 跳转到支付页
							uni.navigateTo({
								url: `/pages/pay/payment?orderId=${orderData.orderId}&orderNumber=${orderData.orderNumber}`,
							});
						} else {
							uni.showToast({
								title: res.msg || "下单失败",
								icon: "none"
							});
						}
					})
					.catch(() => {
						uni.hideLoading();
						uni.showToast({
							title: "网络异常",
							icon: "none"
						});
					});
			},
			toggleInsurance() {
				this.hasInsurance = !this.hasInsurance;
			},
		},
	};
</script>

<style scoped>
	.booking-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 60px;
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 44px 16px 12px;
		background: #fff;
		z-index: 100;
	}

	.nav-left {
		width: 24px;
	}

	.back-icon {
		font-size: 24px;
		color: #333;
	}

	.nav-title {
		flex: 1;
		font-size: 18px;
		font-weight: 500;
		color: #333;
		text-align: center;
		margin-right: 24px;
	}

	.room-info {
		margin-top: 72px;
		background: #fff;
		padding: 16px;
	}

	.room-name {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		margin-bottom: 8px;
		display: block;
	}

	.room-date,
	.room-nights {
		font-size: 14px;
		color: #666;
		margin-right: 12px;
	}

	.booking-section,
	.guest-section,
	.invoice-section,
	.insurance-section,
	.remark-section {
		margin-top: 12px;
		background: #fff;
		padding: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 16px;
	}

	.room-count {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.counter {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.minus,
	.plus {
		width: 24px;
		height: 24px;
		line-height: 22px;
		text-align: center;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.count {
		font-size: 16px;
		color: #333;
	}

	.guest-input,
	.remark-input {
		width: 100%;
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 12px;
		margin-bottom: 12px;
		font-size: 14px;
	}

	.invoice-option,
	.insurance-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.invoice-desc,
	.insurance-desc {
		font-size: 12px;
		color: #999;
		margin-top: 4px;
	}

	.insurance-left {
		display: flex;
		flex-direction: column;
	}

	.insurance-price {
		color: #ff4d4f;
		margin-right: 8px;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 16px;
		background: #fff;
		border-top: 1px solid #eee;
	}

	.price-info {
		display: flex;
		align-items: baseline;
		gap: 4px;
	}

	.total-price {
		font-size: 20px;
		font-weight: bold;
		color: #ff4d4f;
	}

	.pay-btn {
		background: #007aff;
		color: #fff;
		padding: 8px 24px;
		border-radius: 4px;
		font-size: 16px;
	}

	.custom-switch {
		width: 40px;
		height: 24px;
		border-radius: 12px;
		background: #ccc;
		position: relative;
		transition: background 0.2s;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
	}

	.custom-switch::after {
		content: "";
		position: absolute;
		left: 3px;
		top: 3px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #fff;
		transition: left 0.2s;
	}

	.custom-switch.active {
		background: #007aff;
	}

	.custom-switch.active::after {
		left: 19px;
	}
</style>